<template>
    <el-dialog title="填写KPI信息"
        class='product-dialog'
        append-to-body
        width='600px'
        @close="closeEvt" 
        :visible.sync="show">
        <page-layout>
            <template v-slot:header>
                
            </template>

            <el-form :data="tableData"  ref="ruleForm" 
              
                label-width="100px"
                size="mini">
                
                <el-form-item label="填写人:" prop="user_name" >
                <el-input v-model="addQuery.user_name"></el-input>
                </el-form-item>
               
                
                <el-form-item label="填写时间:" prop="time">
                <el-input v-model="addQuery.time"></el-input>
                </el-form-item>
                
               
                <el-form-item label="门店:" prop="shop_name">
                    <el-select v-model="addQuery.shop_name" 
                    label-width="100px"
                    placeholder="请选择活动区域">
                    <div v-for="it in shopList" :key="it">
                        <el-option :label="it" :value="it"></el-option>
                    </div>
                    </el-select>
                </el-form-item>
               
            
               
                <el-form-item label="工作进度:" prop="address">
                    <el-progress :percentage="50"></el-progress>
                </el-form-item>
              
                
                <el-form-item label="自评分:" prop="lng">
                    <el-progress :percentage="10"></el-progress>
                </el-form-item>
                
               
                <el-form-item label="内容:" prop="lat">
                <el-input v-model="addQuery.lat"></el-input>
                </el-form-item>
               
           
            </el-form>
            <template v-slot:footer>
                <el-pagination/>
            </template>
        </page-layout>
        <template v-slot:footer>
            <el-button size='small' @click="closeEvt">取 消</el-button>
            <el-button size='small' type="primary" @click="confirmEvt">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { shopListApi, shopRecordsAdd } from '../../../apis/shopApi'
    export default {
        props: {
            value: {
                type: Boolean,
                required: true
            }
        },

        watch: {
            value(val) {
                this.show = val
            }
        },

        data() {
            return {
                show: false,
                tableData: [],
                query: {
                    page: 1,
                    size: 20,
                    user_id:'',
                    user_name:'',
                    shop_id:'',
                    shop_name:'',
                    lng:'',
                    lat:'',
                    address:'',
                    time:''
                },
                addQuery:{
                    user_id:'',
                    user_name:'',
                    shop_id:'',
                    shop_name:'',
                    lng:'104.047485000000211',
                    lat:'30.637064879440818',
                    address:'',
                    time:''
                },
                total: 0,
                timer: null,
                selectedRows: [],
                loading: true,
                ruleForm:{},
                shopList:[],
                shopInfo:[],
                userInfo:{}

            }
        },

        mounted() {
            this.getList()
            this.userInfo = this.$store.getters['common/userInfo']
            this.addQuery.user_id  = this.userInfo.id
            this.addQuery.user_name  = this.userInfo.name
            this.addQuery.address  = this.userInfo.address
            this.addQuery.time = '2023-1-6 11:10:30'
            console.log('用户信息',this.addQuery)
        },

        methods: {
            format(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`;
            },
            async confirmEvt() {
                this.addQuery.shop_id = (this.shopInfo.find(item => item.shop_name === this.addQuery.shop_name)).shop_id.shop_id
                let result = await shopRecordsAdd(this.addQuery)
                if (result.code === 200) {
                    this.$message.success('新增打卡记录成功')
                    this.show = false
                }
            },
            saveEvt(){

            },
            closeEvt() {
                this.$emit('input', false)
            },
            queryEvt() {
                this.query.page = 1
                this.getList()
            },
            async getList() {
                this.loading = true
                let result = await shopListApi(this.query)
                console.log(result)
                if (result.code === 200) {
                    this.tableData = result.data.rows
                    this.total = result.data.count
                    this.shopInfo = result.data.rows
                    this.shopList = result.data.rows.map(it => it.shop_name)
                }
            },
            fd() {
                if (this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.getList()
                }, 100)
            },
            sizeChange(size) {
                this.query.size = size
                this.fd()
            },
            currentChange(page) {
                this.query.page = page
                this.fd()
            },
            handleSelectionChange(rows) {
                // 这里发生变化的时候，要注意，如果selectedRow包含了数据，但是rows里边没有这条数据了，那么表示这条数据被删除了
                // 一定要注意，这条数据一定是当前页的数据
                // 把本页的所有选中的数据先删除掉

                if (!this.loading) {
                    console.log('---------------------------- handleSelectionChange')
                    this.tableData.forEach(it => {
                        let idx = this.selectedRows.findIndex(oo => oo.id === it.id)
                        if (idx > -1) this.selectedRows.splice(idx, 1)
                    })
                    this.selectedRows = this.selectedRows.concat(rows)
                }
            },

        }
    }
</script>
